<template>
    <div>
        <div style="height:50px;font-size:20px;margin-left:20px" class="goCenterUp">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/home/firstPage' }">后台管理</el-breadcrumb-item>
                <el-breadcrumb-item>管理</el-breadcrumb-item>
                <el-breadcrumb-item>委培管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="line"></div>
        <el-container>
            <el-header style="height:60px" >
                <el-row style="margin-left:20px;height:100%;margin-top:10px;">
                    <el-col :span="2" :offset="10" class="goCenterUp" style="height:100%;">
                        <el-select v-model="professionId" placeholder="请选择" @change="shaiXuan"> 
                            <el-option
                            v-for="item in gongZhongs"
                            :key="item.professionId"
                            :label="item.professionName"
                            :value="item.professionId">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="10" :offset="1" class="goCenterUp" style="height:100%;">
                        <el-input placeholder="请输入内容" v-model="word">     
                            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                        </el-input>
                    </el-col>
                </el-row>
            </el-header>
            <el-main style="height:400px;padding:20px;margin-top:10px" >
                <el-table :data="consignList" tooltip-effect="dark" style="width: 100%;" >
                    <el-table-column prop="name" label="标题" align="center" valign="middle" >
                        <template slot-scope="scope">
                            <el-row style="height:90px;">
                                <el-col :span="12">
                                    <el-image :src="scope.row.consignPicture" style="height:90px;width:90px;">
                                </el-image>
                                </el-col>
                                <el-col :span="12" style="height:100%;" class="juZhong">
                                    <span>{{scope.row.name}}</span>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                     <el-table-column prop="route" label="发布方" align="center" valign="middle" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="publishTime" label="发布时间" width="180" show-overflow-tooltip align="center">
                    </el-table-column>
                    <el-table-column  label="点击量" width="100" show-overflow-tooltip align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.count}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="work" label="操作" width="280" align="center" valign="middle" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.publishTime=='待审核'" size="mini" type="primary" style="background-color: #409EFF;" @click="goToCheck(scope.$index, scope.row)">去审核</el-button>
                            <el-button v-else size="mini" type="success" disabled>已审核</el-button>
                            <el-button size="mini" type="primary" style="background-color: #409EFF;" @click="goToDetail(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
			    </el-table>    
            </el-main>
            <el-footer style="height:50px;padding:20px;" >
                <el-pagination  background :page-size="pageSize" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper"
                :page-count="all" style="float:right;">
                </el-pagination> 
            </el-footer>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{
            pageSize:10,
            pageNo: 1,
			all: 1,
            consignList:[],
            
            word:'电工',
            gongZhongs: [],
            professionId: '1',
        }
    },
    mounted(){
        this.getGongZhong();
        this.getConsignList();
    },
    methods:{
        //测试用登录
        // login(){
        //     var URL='http://47.101.180.43:8075/user/login'
        //                 this.$ajax({
        //                     method:'post',
        //                     url:URL,
        //                     data:{
        //                         username:'root',
		// 					    password:'test',
        //                     },
        //                 }).then(response=>{
        //                     console.log(response.data);
        //                     var code=response.data.code;
        //                     if(code==0){
        //                         console.log(response.data.data); 
        //                     }else{
        //                        	console.log(response.data.msg); 
		// 						this.$notify.error({
		// 							message:'邮箱或密码错误'
		// 						});
        //                     }
        //                 }).catch(error=>{
        //                     console.log(error);
        //                 })
        // },
        //关键词查询
        search(){
            this.pageNo=1;
            this.consignList=[];
            this.getConsignList();
        },
        //筛选
        shaiXuan(){
            this.pageNo=1;
            this.consignList=[];
            this.getConsignList();
        },
        //获取委培
        getConsignList(){
            var URL='http://47.101.180.43:8075/consign/consignOutline'
                        this.$ajax({
                        method:'get',
                        url:URL,
                        params:{
                            pageNo:this.pageNo,
                            pageSize:this.pageSize,
                            positionId:this.professionId,
                            keyWord:this.word,
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            this.all=response.data.data.pages;
                            this.consignList=response.data.data.info;
                            console.log(this.consignList);
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('委培获取失败');
                    });
        },
        //获取工种
        getGongZhong(){
            var URL='http://47.101.180.43:8075/visitor/getProfessionInformation'
                        this.$ajax({
                        method:'get',
                        url:URL,
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.data.professionInformation); 
                            this.gongZhongs=response.data.data.professionInformation;
                            console.log(this.gongZhongs);
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('职业种类获取失败');
                    });
        },
        //页面跳转
        handleCurrentChange(val) {
				this.pageNo = val;
				this.getConsignList();
				console.log(`当前页: ${val}`);
        },
        //去审核
        goToCheck(index, row){
            console.log(index, row);
            this.$router.push({
                path:'/home/consignCheck',
                query:{
                   consignId:this.consignList[index].consignId
                }
            })
        },
        //查看
        goToDetail(index, row){
            console.log(index, row);
            this.$router.push({
                path:'/home/consignDetail',
                query:{
                   consignId:this.consignList[index].consignId
                }
            })
        },
       
    },
}
</script>
<style>
.juZhong{
    display:flex;
    align-items:center;
    justify-content:center
}
.line{
    height:10px;
    background-color: #F0F0F0;
}
.goCenterUp{
    display: flex;
    align-items: center
}
</style>